<template>
  <div id="home">
    <div id="daohang">
      <img src="/static/logo.png" id="logo">
      <input type="text" id="inp">
      <span class="fa fa-search " id="fangda"></span>
      <!--<span><img src="/static/fenlei.jpg" id="fenlei"></span>-->
    </div>
    <div id="bo">
      <Swiper :list="imgs" auto loop></Swiper>
    </div>
    <div>
      <!--<img src="/static/redian.png" alt="">-->
      <marquee id="gundong" behavior="scroll" direction="up" scrolldelay="500" scrollamount="10" bgcolor="#ccc" height="800" width="100"
        loop="-1">

        <span class="fuli">今日福利</span>
        <span>先领卷 在下单 优惠多多</span>
        <br>
        <br>
        <br>
        <span class="fuli">新书速递</span>
        <span>中国文学名著</span>
      </marquee>
    </div>
    <div id="miaosha">
      <span class="xian"> ────────────</span>
    <span >秒杀•活动</span>
    <span class="xian"> ───────</span>
    <span id="gengduo">更多></span>
    </div>
    <!--倒计时-->
    <div id="CountMsg" class="plan">
      <!--<span id="t_d">{{d}}天</span>-->
      <span id="t_h">{{m}}时</span>
      <span id="t_m">{{h}}分</span>
      <span id="t_s">{{s}}秒</span>
    </div>

    <div id="fo" v-for="f in good">
      <img :src="f.img" id="go">
      <!--<span id="yiyuan">1元</span>-->
      <br>
      <span id="an"> ￥{{f.price}}</span>
    </div>
    <div id="jingxuan">
    <img src="static/jingxuan.jpg" alt="">
    </div>
    <div id="squares" v-for="s in squares">
      <img :src="s.img" id="squ">
      <br>
      <span id="ares">{{s.titlt}}</span>
    </div>
    <div>
      <img src="/static/0.jpg" id="haohuo">
    </div>
    <div id="book" v-for="qq in books">
      <span>{{qq.name}}</span>
      <br>
      <span id="cost">￥{{qq.price}}</span>
      <br>
      <img :src="qq.img[0]" id="hao">
    </div>
    <!--<Nav></Nav>-->
  </div>
</template>

<script>
  import { Swiper, SwiperItem } from 'vux'
  import axios from 'axios';
  //  import Nav from '@/components/NavBar.vue'
   
  export default {
    data: function () {
      return {
        d:0,
        h:0,
        m:0,
        s:0,
        books:[],
        imgs: [
          { img: "static/1.jpg" },
          { img: "static/2.jpg" },
          { img: "static/3.jpg" },
          { img: "static/4.jpg" },
          { img: "static/5.jpg" },
          { img: "static/6.jpg" },
          { img: "static/7.jpg" },
        ],
        good: [
          { price: "1.0", img: "static/a.jpg" },
          { price: "1.0", img: "static/s.jpg" },
          { price: "1.0", img: "static/d.jpg" },
          { price: "1.0", img: "static/f.jpg" },
        ],
        squares:[
            {titlt:"低至五元",img:"static/squares/q.png"},
            {titlt:"工具书",img:"static/squares/w.png"},
            {titlt:"社科经管",img:"static/squares/e.png"},
            {titlt:"萱书",img:"static/squares/r.png"},
            {titlt:"互联网科技",img:"static/squares/t.png"},
            {titlt:"文学小说",img:"static/squares/y.png"},
            {titlt:"生活艺术",img:"static/squares/u.png"},
            {titlt:"珍藏套餐",img:"static/squares/i.png"},
            
        ],
        // books:[
        //     {head:"体面的普通人",cost:"21.3",img:"static/books/z.jpg"},
        //     {head:"乌合之众",cost:"27.8",img:"static/books/x.jpg"},
        //     {head:"黄冈作文",cost:"60.0",img:"static/books/c.jpg"},
        //     {head:"特制钢笔书法",cost:"5.0",img:"static/books/v.jpg"},
        //     {head:"阅享天下",cost:"69.0",img:"static/books/b.jpg"},
        //     {head:"培养安全",cost:"75.0",img:"static/books/n.jpg"},
        //     {head:"3D立体",cost:"30.0",img:"static/books/m.jpg"},
        //     {head:"做最好的自己",cost:"38.4",img:"static/books/l.jpg"},
        //     {head:"中华儿童",cost:"64.0",img:"static/books/k.jpg"},
        // ],
        
      }
    },
    components: {
      // Nav,
      Swiper,
      SwiperItem
    },

     mounted:function(){
        
        this.http.post("/api/users/center")
        .then(res=>{
            this.books = res.data.xiangqing
            // console.log(this.books);
        })
         setInterval((e)=>{
          this.getRTime()
         },1000);
       
    },
    methods:{
      getRTime(){
        var EndTime = new Date('2017/11/9 20:00:00'); //截止时间 
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();

        this.d = Math.floor(t / 1000 / 60 / 60 / 24);
        this.h = Math.floor(t / 1000 / 60 / 60 % 24);
        this.m = Math.floor(t / 1000 / 60 % 60);
        this.s = Math.floor(t / 1000 % 60);
      }
    }



  }
</script>


<style scoped>
  #fangda{
    padding-left: 3vw;
    font-size: 25px;
    color: white;
  }
  #cost{
    color: red;
    font-size: 14px;
  }
  #book{
    /*border: solid 0.5px #eeeeee;*/
    text-align: center;
    float: left;
  }
  #hao{
    margin: 5px;
    width: 110px;
    height: 110px;
  }
  #haohuo{
    padding-top: 8px;
    width: 100%;
  }
  #home {
    height: calc(100vh - 90px);
       overflow: scroll;
    background-color: white;
 position: relative;
  }
  #ares{
    /*color: white;*/
    font-size: 14px;
  }

  #jingxuan img{
    width: 100%;
  }
  #squ{
    margin: 8px;
    padding-left: 9px;
    width: 60px;
    height: 60px;
  }
  #squares{
    text-align: center;
    float: left;
    /*display: flex;*/
  }
    #an{
      color: red;
      padding-left: 20px;
    }

  #gengduo{
    color: #666666;
    font-size: 12px;
  }
  .xian{
    color: #666;
    /*display:inline-block;*/
    /*border-bottom: solid 1px black;*/
  }
  #miaosha{
    text-align: center;
    margin: 8px;
    color: red;
  }
  .plan{
    text-align: center;
    margin: 8px;
  }
  .plan span{
    border-radius: 8px;
    background-color: #666666;
    color: white;
  }


  #bo{
    /*padding-top: 40px;*/
    z-index: -10;
  }

  #daohang {
    /*position: absolute;*/
    /*position: fixed;*/
    /*top: 0;
    left: 0;*/
    margin: 0 0;
    width: 100%;
    height: 40px;
    background-color: #F41E33;
    /*z-index: 100;*/
  }

  #logo {
    width: 60px;
    height: 25px;
    padding-top: 8px;
    padding-left: 10px;
  }

  #inp {
    width: 60vw;
    height: 5vh;
    background-color: #CE1D38;
    border: solid 1px red;
  }

  input {
    margin-bottom: 50px;
  }

  #fenlei {
    width: 30px;
    height: 30px;
  }

  #gundong {
    background-color: #eeeeee;
    overflow: hidden;
    text-align: center;
    width: 100%;
    height: 30px;
    
  }

  .fuli {
    border: solid 1px red;
    border-radius: 8px;
    font-size: 14px;
    color: red;
  }

  #fo {
    /*padding-left: 5px;*/
    margin: 3px;
    float: left;
  }

  #go {
    width: 80px;
    height: 80px;
  }





</style>